<template>
	<view class="stastistical-chat">
		<view class="content">
			<view class="chat-title-wrap" >
				<view class="chat-title" v-for="(item,index) in charData" :key='index'>{{item.title}}</view>
			</view>
			<view class="icon-line"></view>
			<view class="stastistical-wrap">
				<view class="stastistical" v-for="(item,index) in charData" :key='index' :style="[{width:item.days*14+'rpx'},{background:item.color},]">
					<text>{{item.days}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"stastistical-chat",
		data() {
			return {
			};
		},
		props:{
			charData:{
				type:Array,
				// default:()=>{
				// 	return [
				// 		// {days:31, title:'出勤',color:'#FF9437'},
				// 		// 	{days:1, title:'年休假',color:'#55ff7f'},
				// 		// 	{days:5, title:'出勤',color:'#55aaff'},
				// 		// 	{days:20, title:'病假'},
				// 		// 	{days:20, title:'学习'},
				// 	]
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.stastistical-chat{
		.content{
			display: flex;
			.chat-title-wrap{
				margin-right: 14rpx;
				.chat-title{
					margin: 40rpx 0;
					height: 36rpx;
					margin-left: 36rpx;
					line-height: 36rpx;
					text-align: end;
					font-weight: 400;
					font-size: 24rpx;
					color: #121F2C;
				}
				
			}
			.icon-line{
				border-right: 2rpx dotted #0089FF;
			}
			.stastistical-wrap{
				.stastistical{
					position: relative;
					margin: 40rpx 0;
					height: 36rpx;
					width: 100rpx;
					background: #007AFF;
					border-radius: 0px 10px 10px 0px;
					text{
						position: absolute;
						right:-36rpx;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>
